<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <!-- H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 -->
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari -->
    <meta content="yes" name="apple-mobile-web-app-capable">
    <!-- 忽略将页面中的数字识别为电话号码 -->
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <!-- 忽略将页面中的数字识别为电话号码 -->
    <meta content="telephone=no" name="format-detection">
    <!-- 忽略Android平台中对邮箱地址的识别 -->
    <meta content="email=no" name="format-detection">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优购商城</title>
    <link rel="stylesheet" href="./statics/mui/css/mui.min.css">
    <link rel="stylesheet" href="./statics/mui/css/icons-extra.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/top-bottom.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./statics/mui/js/mui.min.js"></script>
    <script src="./statics/swiper/swiper.min.js"></script>
    <script src="./statics/zepto/zepto.js"></script>
    <script src="./statics/zepto/event.js"></script>
    <style>
        /* 轮播图样式 */
        
        #slider .mui-slider-item img {
            height: 8rem;
        }
        /* 分类区样式 */
        
        #classify {
            padding: 0;
        }
        
        #classify ul {
            margin-top: 0;
            width: 100%;
            background-color: white;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
        }
        
        #classify ul li {
            padding: 1rem .5rem;
            border: 0;
            text-align: center;
        }
        
        #classify ul li img {
            width: 85%;
        }
        
        #classify ul li .mui-media-body {
            font-size: 0.8rem;
        }
        /* 广告栏样式 */
        
        .advantage {
            width: 100%;
        }
        
        .advantage img {
            width: 100%;
        }
        /* 主要商品区样式 */
        
        #main {
            width: 100%;
        }
        
        #main ul li {
            background-color: #eee;
            padding: 0 0 .5rem 0;
        }
        
        #main ul li img {
            width: 100%;
        }
    </style>
</head>

<body>

    <header id="header" class="mui-bar mui-bar-nav">
        <a class="mui-icon-extra mui-icon-extra-sweep mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">优购商城</h1>
        <a class="mui-icon mui-icon-search mui-icon-right-nav mui-pull-right"></a>
    </header>

    <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop">
            <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="./images/banner.png">
                </a>
            </div>
            <!-- 第一张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="./images/g2.png">
                </a>
            </div>
            <!-- 第二张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="./images/g1.png">
                </a>
            </div>
            <!-- 第三张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="./images/g2.png">
                </a>
            </div>
            <!-- 第四张 -->
            <div class="mui-slider-item">
                <a href="#">
                    <img src="./images/banner.png">
                </a>
            </div>
            <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
            <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#">
                    <img src="./images/g2.png">
                </a>
            </div>
        </div>
        <div class="mui-slider-indicator">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
            <div class="mui-indicator"></div>
        </div>
    </div>

    <div id="classify" class="mui-content">
        <ul class="">
            <li class="">
                <a href="#">
                    <img src="./images/icon.png" alt="">
                    <div class="mui-media-body">超值大牌</div>
                </a>
            </li>
            <li class="">
                <a href="#">
                    <img src="./images/icon1.png" alt="">
                    <div class="mui-media-body">新品特惠</div>
                </a>
            </li>
            <li class="">
                <a href="#">
                    <img src="./images/icon2.png" alt="">
                    <div class="mui-media-body">免费试用</div>
                </a>
            </li>
            <li class="">
                <a href="#">
                    <img src="./images/icon3.png" alt="">
                    <div class="mui-media-body">一元云购</div>
                </a>
            </li>
            <li class="">
                <a href="#">
                    <img src="./images/icon4.png" alt="">
                    <div class="mui-media-body">热销商品</div>
                </a>
            </li>
        </ul>
    </div>

    <div class="advantage">
        <img src="./images/adv.png" alt="">
    </div>

    <div id="main">
        <ul>
            <li>
                <a href="#"><img src="./images/g1.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/g2.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/g1.png" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="./images/g2.png" alt=""></a>
            </li>
        </ul>
    </div>

    <nav id="tab-bar" class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" href="index.html">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" href="components/sort.html">
            <span class="mui-icon-extra mui-icon-extra-class"></span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item" href="components/salse.html">
            <span class="mui-icon-extra mui-icon-extra-outline"></span>
            <span class="mui-tab-label">清仓</span>
        </a>
        <a class="mui-tab-item" href="components/shopcar.html">
            <span class="mui-icon-extra mui-icon-extra-cart"></span><span class="mui-badge">9</span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" href="components/person.html">
            <span class="mui-icon mui-icon-person"></span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
    <style>
        #modal-box {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .4);
            position: fixed;
            z-index: 998;
            border-radius: 0;
        }
        
        #modal-box .mui-popup-inner {
            padding: 1rem 0 0;
            width: 15rem;
            margin: 9rem auto 0;
        }
        
        #modal-box .mui-popup-text {
            padding: 0 0 5px 0;
        }
        
        #modal-box .mui-popup-buttons {
            display: flex;
            width: 15rem;
            border-top: 1px solid #eee;
            height: 2rem;
            background-color: rgba(255, 255, 255, .95);
            border-radius: 0 0 13px 13px;
            line-height: 2rem;
            justify-content: space-around;
            margin: 0rem auto;
        }
        
        #modal-box .mui-popup-buttons span {
            display: block;
            width: 50%;
            cursor: pointer;
        }
        
        #modal-box .button-yes {
            display: inline-block;
            border-right: 1px solid #eee;
        }
    </style>
    <div id="modal-box" class="mui-popup mui-popup-in" style="display: none;">
        <div class="mui-popup-inner">
            <div class="mui-popup-title"><img src="./images/yougouQRcode.png" alt=""></div>
            <div class="mui-popup-text">扫描二维码在手机上查看？</div>
        </div>
        <div class="mui-popup-buttons"><span class="button-yes">是</span><span class="button-no">否</span></div>
    </div>

    <script type="text/javascript">
        mui('body').on('tap', 'a', function() {
            if (window.top.location.hostname == "localhost") {
                window.top.location.href = this.href;
            } else if (window.top.location.hostname = "bluefantast.github.io") {
                window.top.location.href = this.href;
            }
        });
        mui('body').on('click', 'a', function() {
            if (window.top.location.hostname == "localhost") {
                window.top.location.href = this.href;

            } else if (window.top.location.hostname = "bluefantast.github.io") {
                window.top.location.href = this.href;
            }

        });

        var gallery = mui('.mui-slider');
        gallery.slider({
            interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
        });
    </script>
    <script>
        // 提示用户在手机设备上查看
        $(function() {
            var screenWidth = document.body.clientWidth;
            if (screenWidth > 640) {
                $('#modal-box').css('display', 'block');
            }

            $('.button-yes').on('tap', function(e) {
                $('#modal-box').css('display', 'none');
            })
            $('.button-no').on('tap', function(e) {
                $('window').width(480);
                $('#modal-box').css('display', 'none');
            })
        })
    </script>

</body>

</html>